<template>
  <div>
   <!-- <h2>慧宇服务平台后台首页面</h2>-->




    <el-row :gutter="20">
      <el-col :span="12">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="common_style_container1 common_style_font">
              <h3>入驻企业总量</h3>
              <h2>{{companyTotal}}</h2>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="common_style_container2 common_style_font">
              <h3>人才库总量</h3>
              <h2>{{talnetTotal}}</h2>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <div class="common_style_container3 common_style_font">
              <h3>审核通过职位总量</h3>
              <h2>{{workJobTotal}}</h2>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="common_style_container4 common_style_font">
              <h3>通过审核的简历数量</h3>
              <h2>{{resumeTotal}}</h2>
            </div>
          </el-col>
        </el-row>


      </el-col>


      <el-col :span="12">
        <el-calendar>
          <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
          <template
            slot="dateCell"
            slot-scope="{date, data}">
            <p :class="data.isSelected ? 'is-selected' : ''">
              {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
            </p>
          </template>
        </el-calendar>
      </el-col>
    </el-row>




  </div>
</template>

<script>
  export default {
    data(){
      return {
        valueNew: new Date(),
        resumeTotal:0,
        companyTotal:0,
        workJobTotal:0,
        talnetTotal:0
      }
    },
    mounted () {
      this.loadResumeTotal()
      this.loadCompanyTotal()
      this.loadWorkJobTotal()
      this.loadTalnetTotal()
    },
    methods:{
      loadResumeTotal(){
        this.$http({
          url: this.$http.adornUrl('/client_home/resumeTotal'),
          method: 'get',
        }).then(data => {
          if (data.data.code === 0){
            this.resumeTotal = data.data.total
          }
        })
      },
      loadCompanyTotal(){
        this.$http({
          url: this.$http.adornUrl('/client_home/companyTotal'),
          method: 'get',
        }).then(data => {
          if (data.data.code === 0){
            this.companyTotal = data.data.total
          }
        })
      },
      loadWorkJobTotal(){
        this.$http({
          url: this.$http.adornUrl('/client_home/workJobTotal'),
          method: 'get',
        }).then(data => {
          if (data.data.code === 0){
            this.workJobTotal = data.data.total
          }
        })
      },
      loadTalnetTotal(){
        this.$http({
          url: this.$http.adornUrl('/client_home/talnetTotal'),
          method: 'get',
        }).then(data => {
          if (data.data.code === 0){
            this.talnetTotal = data.data.total
          }
        })
      }
    }
  }
</script>

<style>
  .common_style_container1{
    background: azure;
    width: 280px;
    height: 150px;
    border: 1px solid transparent;
  }

  .common_style_container2{
    background: azure;
    width: 280px;
    height: 150px;
    border: 1px solid transparent;
    margin-left: 150px;
  }

  .common_style_container3{
    background: azure;
    margin-top: 50px;
    width: 280px;
    height: 150px;
    border: 1px solid transparent;
  }

  .common_style_container4{
    background: azure;
    margin-top: 50px;
    width: 280px;
    height: 150px;
    border: 1px solid transparent;
    margin-left: 150px;
  }

  .common_style_font{
    text-align: center;
    line-height: 40px;
  }



  .mod-home {
    line-height: 1.5;
  }
  .is-selected {
    color: #1989FA;
  }
  /*调整日历的宽高*/
 .el-calendar-table .el-calendar-day{
   /*width: 60px;*/
   height: 40px;
 }
</style>

